<form nz-form [formGroup]="addForm" class="modal-add-form" (ngSubmit)="onSubmit($event)">
    <div nz-row [nzGutter]="24" style="margin-bottom: 24px;">
        <div nz-col [nzSpan]="6" style="text-align: right; line-height: 1.57; justify-content: center;">
            <span style="align-content: center;">上级部门:</span>
        </div>
        <div nz-col>
            <nz-tree-select style="width: 250px;" [nzExpandedKeys]="expandKeys" [nzNodes]="deptNodes" nzShowSearch
                nzPlaceHolder="Please select" (ngModelChange)="onChange($event)" [(ngModel)]="parentValue"
                [ngModelOptions]="{standalone: true}">
            </nz-tree-select>
        </div>
    </div>

    <nz-form-item>
        @if (editMode == modeEnum.ADD) {
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="deptName" nzRequired>部门名称</nz-form-label>
        } @else {
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="deptName" [nzSpan]="8">部门名称</nz-form-label>
        }
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input class="default-input uri-input" nz-input formControlName="deptName" placeholder="部门名称"
                id="deptName" />
            <div *ngIf="submitted && fm['deptName'].invalid" class="alert">
                <div *ngIf="fm['deptName'].errors?.['required']">请输入部门名称</div>
                <div *ngIf="fm['deptName'].errors?.['minlength']">部门名称不少于2个字</div>
                <div *ngIf="fm['deptName'].errors?.['maxlength']">部门名称不超过45个字</div>
                </div>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        @if (editMode == modeEnum.ADD) {
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="code" nzRequired>部门编号</nz-form-label>
        } @else {
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="code">部门编号</nz-form-label>
        }
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input class="default-input uri-input" nz-input formControlName="code" placeholder="部门编号" id="code" />
            @if (editMode == modeEnum.ADD) {
            <div *ngIf="submitted && fm['code'].invalid" class="alert">
                <div *ngIf="fm['code'].errors?.['rquired']">请输入部门编号</div>
                <div *ngIf="fm['code'].errors?.['minlength']">部门编号不少于2个字</div>
                <div *ngIf="fm['code'].errors?.['maxlength']">部门编号不超过45个字</div>
            </div>
            }
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="leader">负责人</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input class="default-input uri-input" nz-input formControlName="leader" placeholder="负责人" id="leader" />
            <div *ngIf="submitted && fm['leader'].invalid && fm['leader'].dirty" class="alert">
                <div *ngIf="fm['leader'].errors?.['minlength']">名称不少于2个字</div>
                <div *ngIf="fm['leader'].errors?.['maxlength']">名称不超过20个字</div>
            </div>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber">联系电话</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input class="default-input uri-input" nz-input formControlName="phoneNumber" placeholder="联系电话"/>
            <div *ngIf="submitted && fm['phoneNumber'].invalid && fm['phoneNumber'].dirty" class="alert">
                <div *ngIf="fm['phoneNumber'].errors?.['minlength']">请输入正确手机号</div>
                <div *ngIf="fm['phoneNumber'].errors?.['maxlength']">请输入正确手机号</div>
            </div>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="email">邮箱</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input class="default-input uri-input" nz-input formControlName="email" placeholder="邮箱"/>
            <div *ngIf="submitted && fm['email'].invalid && fm['email'].dirty" class="alert">
                <div *ngIf="fm['email'].errors?.['email']">请输入正确邮箱</div>
            </div>
        </nz-form-control>
    </nz-form-item>

    <div nz-row nzJustify="end" class="action-area">
        <div nz-col>
            @if (editMode == modeEnum.ADD) {
            <button class="action-button" nz-button [nzType]="'primary'">添加</button>
            } @else {
            <button class="action-button" nz-button [nzType]="'primary'">修改</button>
            }
            <button class="action-button" nz-button (click)="onCancel($event)">取消</button>
        </div>
    </div>
</form>